<template>
	<view class="content">
		<view class="header">
			<image @click="goindex()" class="logo" :src="_baseURL + setting.site_logo" mode=""></image>
			<view class="nologin" v-if="showinfonav">
				<view class="to-login" @click="gologin()">登录</view>
				<!-- <view class="com-btn" @click="goregister()">注册</view> -->
			</view>
			<view v-else class="after-login">
				<view class="balance">
					<image class="jinbi" src="../../static/img/jinbi.png" mode=""></image>
					<view class="yue">${{userinfo.money}}</view>
					<image @click="getrefresh()" class="shuaxin" :class="isrefresh ? 'ssssxuanzhuan':''" src="../../static/img/shuaxin.png" mode=""></image>
					<view class="qianbao">
						<image src="../../static/img/qianbao.png" mode=""></image>
					</view>
				</view>
				<view class="com-my" @click="gouserindex()">
					<image src="../../static/img/avatar.webp" mode=""></image>
				</view>
			</view>
		</view>
		<view class="tabber-wrapper">
			<view class="backNav">
				<view class="left" @click="back()">
					<image src="../../static/img/left.png" mode=""></image>
				</view>
				<view class="center">充值</view>
				<view class="right"></view>
			</view>
			<view class="con">
				<view class="wallet-address">
					<!-- <view class="top-box">
						<view class="tbleft">
							<image src="../../static/img/bizhong.png" mode=""></image>
							<view>USDT加密货币</view>
						</view>
						<view class="tbright">更改</view>
					</view> -->
					<view class="network-box">
						<view class="item" :class="type == 0 ? 'active':''">
							<view class="itemleft">
								<view class="text1">TRC20</view>
								<view class="text2">交易时间≈5分钟</view>
							</view>
							<image src="../../static/img/xuanzhong.png" mode=""></image>
						</view>
					</view>
					<view class="code-box">
						<view class="code-top">
							<image src="../../static/img/bizhong.png" mode=""></image>
							<view class="text3">USDT</view>
							<view class="text4">TRC20</view>
						</view>
						<view class="qrq-box">
							<image :src="setting.alipay_qrcode" mode=""></image>
						</view>
						<view class="address">钱包地址</view>
						<view class="flex">
							<view>{{setting.alipay_address}}</view>
							<image @click="copy(setting.alipay_address)" src="../../static/img/copy.png" mode=""></image>
						</view>
						<input v-model="num" type="text" class="jine" placeholder="请输入充值金额" style="display:none;"/>
						<view class="copy-box" @click="submit()" style="display:none;">提交</view>
					</view>
					<view class="tips-box">
						<view class="tips-title"> 最低存款额度 </view>
						<view class="tips-amount">
							<image src="../../static/img/jinggao.png" mode=""></image>
							<view> 10 USDT </view>
						</view>
						<view class="tips-text">提示: 确保您用于交易的网络与存款的网络相同, 否则您的资金将永久丢失。 若您的存款低于当前限额，您的资金将永久丢失。</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getuserinfo,ajaxpay,sysconfig } from '../../api/api.js'
	import { baseURL } from '../../api/http.js'
	export default{
		data(){
			return{
				_baseURL: baseURL,
				showinfonav:true,
				userinfo:[],
				isrefresh: false,
				setting:[],
				type:0,
				num:'',
			}
		},
		onLoad() {
			if (uni.getStorageSync('userinfo')) {
				this.userinfo = JSON.parse(uni.getStorageSync('userinfo'))
			}
			if(uni.getStorageSync('token')){
				this.showinfonav = false
				this.getuserinfo()
			}
			this.getsysconfig()
		},
		methods:{
			goindex(){
				uni.reLaunch({
					url:'/pages/index/index'
				})
			},
			getrefresh() {
				let that = this;
				this.isrefresh = true;
				setTimeout(function(){
					that.isrefresh = false;
				},1000)
				this.getuserinfo();
			},
			getuserinfo(){
				getuserinfo().then(res => {
					if(res.data.status.errorCode == 0){
						this.userinfo = res.data.data.member
					}else{
						uni.showToast({
							title: res.data.status.msg,
							icon:'error',
							duration: 2000
						});
					}
				}).catch(err => {
					console.log(err)
				})
			},
			getsysconfig(){
				sysconfig().then(res => {
					if(res.data.status.errorCode == 0){
						this.setting = res.data.data
					}else{
						uni.showToast({
							title: res.data.status.msg,
							icon:'error',
							duration: 2000
						});
					}
				}).catch(err => {
					console.log(err)
				})
			},
			back(){
				uni.navigateBack()
			},
			submit(){
				if(this.num == ''){
					uni.showToast({
						title: '请输入充值金额',
						icon:'error',
						duration: 2000
					});
					return false
				}
				let datas = {
					amount:this.num,
					xiaoshu:'',
					paytype:'usdt',
					fanli:''
				}
				ajaxpay(datas).then(res => {
					if(res.data.status.errorCode == 0){
						uni.showToast({
							title: res.data.status.msg,
							icon:'success',
							duration: 2000,
							success() {
								uni.navigateTo({
									url:'/pages/transRecord/chongzhi'
								})
							}
						});
					}else{
						uni.showToast({
							title: res.data.status.msg,
							icon:'error',
							duration: 2000
						});
					}
				}).catch(err => {
					console.log(err)
				})
			},
			copy(value) {
			 	uni.setClipboardData({
			 	    data: value,
			    	success: function () {
						//调用方法成功
						uni.showToast({
							title:'复制成功',
							icon:'success',
							duration: 2000
						});
					}
			 	})
			},
			gologin(){
				uni.navigateTo({
					url:'/pages/login/login'
				})
			},
			goregister(){
				uni.navigateTo({
					url:'/pages/login/register'
				})
			},
			gouserindex(){
				uni.navigateTo({
					url:'/pages/user/index'
				})
			}
		}
	}
</script>

<style scoped>
	*{
		box-sizing: border-box;
	}
	.content{
		width: 100%;
		min-height: 100vh;
		background: #212125;
	}
	.header{
		width: 100%;
		height: 112rpx;
		padding-right: 24rpx;
		padding-left: 39rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.logo{
		width: 100rpx;
		height: 80rpx;
	}
	.nologin,.after-login{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.to-login{
		word-break: break-all;
		text-align: center;
		font-weight: 700;
		margin-right: 40rpx;
		font-size: 26rpx;
		color: #fff;
		padding-top: 8rpx;
	}
	.com-btn{
		display: flex;
		justify-content: center;
		align-items: center;
		min-width: 204rpx;
		height: 64rpx;
		background: #fee619;
		box-shadow: 0 8rpx 0 0 #d9a715, inset 0 0 24rpx 6rpx rgba(243, 48, 48, .34), 0 4rpx 12rpx 6rpx rgba(255, 123, 1, .34);
		border-radius: 12rpx;
		font-weight: 700;
		padding-top: 8rpx;
		font-size: 26rpx;
		color: #1c1e22;
		word-break: break-all;
		text-align: center;
	}
	.balance{
		display: flex;
		justify-content: space-between;
		align-items: center;
		min-width: 160rpx;
		max-width: 400rpx;
		height: 70rpx;
		padding-left: 32rpx;
		background: #14161a;
		border-top-left-radius: 10rpx;
		border-bottom-left-radius: 10rpx;
	}
	.jinbi{
		width: 32rpx;
		height: 28rpx;
	}
	.yue{
		font-size: 30rpx;
		padding-left: 10rpx;
		font-weight: 600;
		color: #fff;
	}
	.shuaxin{
		width: 30rpx;
		height: 30rpx;
		margin-left: 22rpx;
		margin-right: 16rpx;
	}
	.ssssxuanzhuan {
		animation: rotatefresh 1s;
	}
	
	@keyframes rotatefresh {
		from {
			transform: rotate(0deg);
		}
	
		to {
			transform: rotate(360deg);
			transition: all 0.6s;
		}
	}
	.qianbao{
		width: 72rpx;
		height: 66rpx;
		border-top-right-radius: 10rpx;
		border-bottom-right-radius: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #fee619;
		box-shadow: 0 2rpx 0 0 #d9a715, inset 0 0 24rpx 6rpx rgba(243, 48, 48, .34), 0 4rpx 12rpx 6rpx rgba(255, 123, 1, .34);
	}
	.qianbao image{
		width: 30rpx;
		height: 30rpx;
	}
	.com-my{
		width: 70rpx;
		height: 78rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 30rpx;
		padding-top: 8rpx;
		border-radius: 50%;
		overflow: hidden;
	}
	.com-my image{
		width: 70rpx;
		height: 70rpx;
	}
	
	.tabber-wrapper{
		background: #202125;
		display: flex;
		flex-direction: column;
	}
	.backNav{
		height: 92rpx;
		background: #202125;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.left{
		width: 92rpx;
		line-height: 92rpx;
		height: 100%;
		padding-left: 32rpx;
	}
	.left image{
		width: 22rpx;
		height: 22rpx;
	}
	.center{
		flex: 1;
		text-align: center;
		color: #fff;
		font-weight: 900;
		font-size: 30rpx;
	}
	.right{
		width: 92rpx;
		line-height: 92rpx;
		height: 100%;
	}
	.con{
		position: relative;
	}
	.wallet-address{
		width: 100%;
		background: #24262a;
		padding: 24rpx 20rpx 0 20rpx;
	}
	.top-box{
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 112rpx;
		border-radius: 10rpx;
		background-color: #1a1c20;
		padding: 0 36rpx 0 24rpx;
		margin-bottom: 16rpx;
	}
	.tbleft{
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.tbleft image{
		width: 32rpx;
		height: 32rpx;
		margin-right: 8rpx;
	}
	.tbleft view{
		font-weight: 600;
		color: #fff;
		font-size: 28rpx;
	}
	.tbright{
		font-weight: 700;
		color: #36ba73;
		font-size: 24rpx;
	}
	.network-box{
		margin-top: 10rpx;
	}
	.item{
		margin-bottom: 9rpx;
		height: 100rpx;
		border-radius: 9rpx;
		background-color: #1a1c20;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 26rpx;
		border: 2rpx solid #1c1f25;
	}
	.item.active{
		border: 2rpx solid #36ba73;
		background: linear-gradient(90deg,rgba(0,231,107,.2),rgba(28,30,34,.2))!important;
	}
	.item:last-child{
		margin-bottom: 0;
	}
	.itemleft{
		display: flex;
		flex-direction: column;
	}
	.text1{
		color: #fff;
		font-weight: 700;
		font-size: 24rpx;
	}
	.text2{
		color: #bacbdb;
		font-size: 20rpx;
		margin-top: 4rpx;
	}
	.item image{
		width: 36rpx;
		height: 36rpx;
	}
	.code-box{
		border-radius: 9rpx;
		margin-top: 20rpx;
		background: #1a1c20;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 48rpx 0 74rpx 0;
	}
	.code-top{
		display: flex;
		align-items: center;
		color: #fff;
		font-size: 24rpx;
	}
	.code-top image{
		width: 40rpx;
		height: 40rpx;
		margin-right: 9rpx;
	}
	.text3{
		font-weight: 700;
		font-size: 40rpx;
		margin-right: 9rpx;
	}
	.text4{
		font-size: 40rpx;
	}
	.qrq-box{
		width: 228rpx;
		height: 228rpx;
		margin-top: 20rpx;
		border: 6rpx solid #fff;
		border-radius: 18rpx;
	}
	.qrq-box image{
		width: 100%;
		height: 100%;
	}
	.address{
		color: #fff;
		text-align: center;
		font-weight: 600;
		margin-top: 38rpx;
		font-size: 28rpx;
	}
	.flex{
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 8rpx;
	}
	.flex view{
		font-size: 28rpx;
		word-break: break-all;
		text-align: center;
		color: #fff;
		margin-right: 10rpx;
	}
	.flex image{
		width: 30rpx;
		height: 30rpx;
	}
	.jine{
		width: 80%;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 28rpx;
		color: #fff;
		border: 0;
		background-color: #2c2c30;
		margin-top: 16rpx;
		padding: 0 20rpx;
		border-radius: 12rpx;
	}
	.copy-box{
		width: 508rpx;
		height: 70rpx;
		text-align: center;
		line-height: 70rpx;
		font-size: 32rpx;
		color: #000;
		font-weight: 700;
		border-radius: 12rpx;
		margin-top: 44rpx;
		background: #86f455;
		box-shadow: 2rpx 8rpx 8rpx 10rpx rgba(126,243,75,.24),0 6rpx 0 0 #5db93d,inset 0 0 10rpx 4rpx rgba(104,253,50,.9);
	}
	.tips-box{
		margin-top: 16rpx;
		padding: 16rpx 40rpx 34rpx 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		border-radius: 9rpx;
		background: #1a1c20;
	}
	.tips-title{
		font-size: 28rpx;
		font-weight: 600;
		color: #fff;
	}
	.tips-amount{
		margin-top: 10rpx;
		margin-right: 12rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight: 700;
		font-size: 32rpx;
		color: #fff;
	}
	.tips-amount image{
		width: 24rpx;
		height: 22rpx;
		margin-right: 20rpx;
	}
	.tips-text{
		color: #ffb018;
		margin-top: 18rpx;
		font-size: 21rpx;
	}
</style>